<template>
  <div class="home-page">
    <template>
      <el-table
        :data="tableData"
        border
        height="500px"
        style="width: 100%"
        @row-click="updateActivity">
        <el-table-column
          fixed
          prop="name"
          align="center"
          label="活动名称">
        </el-table-column>
        <el-table-column
          prop="region"
          align="center"
          label="活动区域">
        </el-table-column>
        <el-table-column
          prop="date1"
          label="活动时间">
        </el-table-column>
        <el-table-column
          prop="type"
          align="center"
          label="活动场馆">
        </el-table-column>
        <el-table-column
          prop="joinWay"
          align="center"
          label="报名方式">
        </el-table-column>
        <el-table-column
          prop="createTime"
          align="center"
          label="创建时间">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click.stop="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template>
      <div class="block">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 20,
      total: 400,
      tableData: [{
        name: '佛山大型相亲交友见面会',
        region: '佛山市顺德区北滘镇',
        date1: '2019-04-01T16:00:00.000Z',
        type: '美的新都汇',
        joinWay: '网上报名'
      }]
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    test () { return 'hello world' },
    handleDelete (id) {
      if (!id) return false
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          id: id
        }
        this.$store.dispatch('deleteActivity', params).then((res) => {
          if (res.code === '1') {
            this.$message({
              showClose: true,
              message: '删除成功',
              type: 'success'
            })
            this.$router.go(0)
          } else {
            this.$message({
              showClose: true,
              message: '删除失败',
              type: 'fail'
            })
          }
        }).catch((err) => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    updateActivity (row) {
      let params = {
        id: row.id
      }
      this.$router.push({ path: 'adminForm', query: params })
    },
    getData () {
      let params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      this.$store.dispatch('getActivity', params).then((res) => {
        if (res.code === '1') {
          this.total = res.data.total
          this.tableData = res.data.list
        } else {
          this.$message({
            showClose: true,
            message: '获取数据失败',
            type: 'fail'
          })
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getData()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getData()
    }
  }
}
</script>
<style lang="scss" scoped>
  .home-page {
    margin: 100px auto;
    width: 80vw;
    height: 80vh;
  }
</style>
